<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../assets/elem-ui/node_modules/element-ui/lib/theme-chalk/index.css"/>
		<script src="../assets/vue/node_modules/vue/dist/vue.js"></script>
		<script src="../assets/elem-ui/node_modules/element-ui/lib/index.js"></script>
		<script src="../assets/axios/node_modules/axios/dist/axios.js"></script>
		<script src="../js/ajax/api.js"></script>
		<script src="../js/recorder.js"></script>
	</head>
	
	<body>
		<div id="app">
			<div>
				<audio controls autoplay></audio>
				<input @click="startRecording()" type="button" value="录音" />
				<input @click="stopRecording()" type="button" value="停止" />
				<input @click="playRecording()" type="button" value="播放" />
				<input @click="uploadAudio()" type="button" value="提交" />
				<input @click="cancelAudio()" type="button" value="取消" />
			</div>
		</div>
		<script>
			let recorder = new Recorder();
			 new Vue({
			        el: '#app',
			        data: {
			            value: [],
			            options: []

			        },
			        methods: {
						startRecording(){
							recorder.start().then(() => {
								// 开始录音
							}, (error) => {
								// 出错了
								console.log(`${error.name} : ${error.message}`);
							});
						},
						stopRecording(){
							recorder.stop();
						},
						playRecording(){
							recorder.play()
							console.log(recorder.getPCMBlob())


						},
						uploadAudio(){
							let formData=new FormData();
							let blod = recorder.getPCMBlob()

							formData.append('files',blod)
							axios.post(apiUrl+'Student/api/Student/UploadFile',formData,{
								'Content-Type':'multipart/form-data',
								'headers':{Authorization:localStorage.getItem('Authorization') }
							}).then(res=>{

							})
						},


			        },
			        beforeCreate() {
			            //第一个生命周期函数，实例未创建即执行，不能操作data与methods
						// api.post()

			        },
			        created() {
			            //最早能操作data与methods的方法

			        },
			        beforeMount() {
			            //页面在内存中编辑完成，js内容尚未渲染到页面
			            console.log("beforeMount");
			        },
			        mounted() {
			            //内存中的模板已经挂载到页面中，页面渲染完成。
			            console.log("mounted");
			        }
			    })
		</script>
<!--		<script>-->

<!--			var recorder;-->

<!--			var audio = document.querySelector('audio');-->

<!--			function startRecording() {-->
<!--				HZRecorder.get(function (rec) {-->
<!--					recorder = rec;-->
<!--					recorder.start();-->
<!--				});-->
<!--			}-->

<!--			function stopRecording() {-->
<!--				recorder.stop();-->
<!--			}-->

<!--			function playRecording() {-->
<!--				recorder.play(audio);-->
<!--			}-->

<!--			function cancelAudio(){-->
<!--				recorder.stop();-->
<!--				recorder.clear();-->
<!--			}-->

<!--			function uploadAudio() {-->
<!--				console.log(recorder.getBlob());-->
<!--				recorder.upload(apiUrl+"Student/api/Student/UploadFile", function (state, e) {-->
<!--					console.log(state,e);-->
<!--					switch (state) {-->
<!--						case 'uploading':-->
<!--							// var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';-->
<!--							break;-->
<!--						case 'ok':-->
<!--							// alert(e.target.responseText);-->
<!--							alert("上传成功");-->
<!--							break;-->
<!--						case 'error':-->
<!--							alert("上传失败");-->
<!--							break;-->
<!--						case 'cancel':-->
<!--							alert("上传被取消");-->
<!--							break;-->
<!--					}-->
<!--				});-->
<!--			}-->

<!--		</script>-->
	</body>
</html>
